<template>
	<section style="height: 300px">
		<p>测试上下调整</p>
		<resizer :sizes="[4, 6]" direction="column">
			<resizer-item :style="{ minHeight: '100px' }">
				<div class="r">元素1</div>
			</resizer-item>
			<resizer-item>
				<div class="r">元素2</div>
			</resizer-item>
		</resizer>
	</section>

	<section>
		<p>测试左右调整</p>
		<Resizer direction="row" :sizes="[5, 6]">
			<resizer-item>
				<div class="r">元素1</div>
			</resizer-item>
			<resizer-item>
				<div class="r">元素2</div>
			</resizer-item>
		</Resizer>
	</section>
</template>
<script setup>
import Resizer from "../src/resizer.vue";
import resizerItem from "../src/resizer-item.vue";
</script>
<style scoped>
.r {
	width: 100px;
	height: 100px;
	background: #2e62ff46;
	margin: 10px;
	line-height: 100px;
	text-align: center;
}
</style>
